<template>
    <div class="grid1">
        <div class="white">设置子元素数量：</div>
        <el-slider class="el_slider" v-model="num" :step="1" :min="1" :max="10"></el-slider>
        <div class="parent">
            <div v-for="(item, index) in num" :key="item" class="child child-box">{{ `元素${index + 1}` }}</div>
        </div>
    </div>
    
</template>
<script setup>
import { ref } from 'vue'

const num = ref(1)
</script>
<style scoped lang='scss'>
.grid1 {
    display: flex;
    flex-direction: column;
    align-items: center;

    &>div {
        width: 80%;
    }

    .parent {
        display: grid;
        width: 80%;
        padding: 12px;
        background-color: #000;

        .child {
            width: 100%;
            height: 30px;
            margin-bottom: 12px;
            text-align: center;
            border: 2px solid #4eb5fa;
        }   
    }
}

</style>